<script setup>
const props = defineProps({
  icon: {
    type: String,
    required: true, // 图标 URL 或类名
  },
  title: {
    type: String,
    required: true, // 卡片标题
  },
  value: {
    type: [String, Number],
    required: true, // 数据值
  },
  backgroundColor: {
    type: String,
    default: '#ffffff', // 背景颜色
  },
});
</script>

<template>
  <div
      class="card-stats"
      :style="{ backgroundColor: props.backgroundColor }"
  >
    <div class="icon">
      <i :class="props.icon"></i> <!-- 使用字体图标 -->
    </div>
    <div class="content">
      <h3>{{ props.title }}</h3>
      <p>{{ props.value }}</p>
    </div>
  </div>
</template>

<style scoped>
.card-stats {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  flex: 1;
}

.card-stats:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.icon {
  font-size: 24px;
  color: #007bff; /* 图标颜色 */
}

.content {
  flex: 1; /* 内容区域占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.content p {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}
</style>